<script lang="ts" setup>
import { ref, DirectiveBinding } from "vue";

const vFocus = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    el.focus();
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    // 你可以在这里添加逻辑，以便在指令绑定的元素更新时执行
  },
};
// 在模板中启用 v-highlight
const vHighlight = {
  mounted: (el:HTMLElement) => {
    el.classList.add('is-highlight')
    el.addEventListener('click', () => {
        console.log('highlight')
    })
  }
}
// 注册自定义指令
const directives = {
  focus: vFocus,highlight:vHighlight
};
</script>
<!--
<script lang="ts">
export default {
    directives: {
        click: {
            mounted(el) {
                el.addEventListener('click', () => {
                    console.log('click')    
                })
            },
        }
    }
}
</script>
-->
<template>
  <div v-click>自定义指令</div>
  <div v-focus>Click me!</div>
  <input type="text" v-focus />
  <p v-highlight>This sentence is important!</p>
</template>
